<template>
  <div class="my-info-detail">
    <div class="my-info-header">
      <van-row>
        <van-col span="20">
          <van-icon class="user-icon-info" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
          <span @click="showLoginPage(true)">{{ userInfo.name || '立即登陆' }}</span>
          <van-icon name="arrow" />
        </van-col>
        <van-col span="4">
          <van-icon name="scan" class="info-scan-icon" />
        </van-col>
      </van-row>
    </div>
    <van-cell-group inset>
      <van-cell icon="setting-o" title="我的消息" is-link />
      <van-cell
        icon="setting-o"
        title="云贝中心"
        is-link
        value="免费兑黑胶VIP"
      />
      <van-cell icon="setting-o" title="创作者中心" is-link />
    </van-cell-group>
    <van-cell-group title="音乐服务" inset>
      <van-cell icon="setting-o" title="云村有票" is-link />
      <van-cell icon="setting-o" title="商城" is-link />
      <van-cell icon="setting-o" title="游戏专区" is-link />
      <van-cell icon="setting-o" title="口袋彩铃" is-link value="抖音神曲" />
    </van-cell-group>
    <van-cell-group title="其他" inset>
      <van-cell icon="setting-o" title="设置" is-link />
      <van-cell icon="setting-o" title="夜间模式" is-link />
      <van-cell icon="setting-o" title="定时关闭" is-link />
      <van-cell icon="setting-o" title="个性装扮" is-link />
      <van-cell icon="setting-o" title="边听边存" is-link value="未开启" />
      <van-cell icon="setting-o" title="在线听歌免流量" is-link />
      <van-cell icon="setting-o" title="音乐黑名单" is-link />
      <van-cell icon="setting-o" title="青少年模式" is-link value="未开启" />
      <van-cell icon="setting-o" title="音乐闹钟" is-link />
    </van-cell-group>
    <van-cell-group inset>
      <van-cell icon="setting-o" title="我的订单" is-link />
      <van-cell icon="setting-o" title="优惠券" is-link />
      <van-cell icon="setting-o" title="我的客服" is-link />
      <van-cell icon="setting-o" title="分享网易云音乐" is-link />
      <van-cell icon="setting-o" title="关于" is-link />
    </van-cell-group>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  // async created() {
  //   await this.getSongUrl();
  // },
  data() {
    return {
      move: false,
      songInfoList: [],
    };
  },
  computed: {
    ...mapState({
      songId: (state) => state.songId,
      songIds: (state) => state.songIds,
      musicList: (state) => state.musicList,
      userInfo: (state) => state.userInfo,
    }),
    musicInfo() {
      // 当前播放音乐的信息数据
      return (
        this.musicList.filter((ele) => ele.targetId === this.songId)[0] || {}
      );
    },
    currentSong() {
      return this.songInfoList.filter((ele) => ele.id === this.songId)[0] || {};
    },
    /*
    musicInfo: {
      adDispatchJson: null,
      adLocation: null,
      adSource: null,
      adid: null,
      encodeId: "1872434755",
      event: null,
      exclusive: false,
      extMonitor: null,
      extMonitorInfo: null,
      imageUrl: "http://p1.music.126.net/1CkVgC1gtvsGZPYamq1gOQ==/109951166328823869.jpg", // 可用
      monitorBlackList: null,
      monitorClick: null,
      monitorClickList: null,
      monitorImpress: null,
      monitorImpressList: null,
      monitorType: null,
      program: null,
      scm: "1.music-homepage.homepage_banner_force.banner.3307962.1916787521.null",
      song: null,
      targetId: 1872434755, // 可用
      targetType: 1, // 可用
      titleColor: "red",
      typeTitle: "新歌首发",
      url: null,
      video: null,
    }
    */
    badge() {
      return "1";
    },
  },
  methods: {
    ...mapMutations(["showLoginPage"]),
    // async getSongUrl() {
    //   const { data } = await this.$api.getSongUrl(this.songIds.join(","));
    //   if (data.code === 200) {
    //     this.songInfoList = data.data;
    //   } else {
    //     Toast.fail(`code: ${data.code}`);
    //   }
    // },
  },
};
</script>

<style lang="less" scoped>
.my-info-detail {
  .my-info-header {
    padding: 20px 15px;
    font-size: 14px;
    line-height: 10px;
    .user-icon-info {
      font-size: 18px;
    }
    .info-scan-icon {
      font-size: 18px;
      float: right;
    }
  }
}
</style>
